<template>
  <div class="app">
    <Header v-if="!noHeaderAndUser"></Header>
    <div :class="['app-main', { 'full-width': noHeaderAndUser || noUser }]">
      <router-view v-slot="{ Component, route }">
        <component :is="Component" class="app-main-left" />
      </router-view>
      <User v-if="!noHeaderAndUser && !isMobile && !noUser" class="app-main-right"></User>
      <div v-if="noHeaderAndUser && isMobile" @click="router.push('/user')">{{ userStore.name ? "个人中心" : "登录" }}</div>
    </div>
  </div>
</template>


<script setup>
import { computed, onMounted, onBeforeUnmount, ref } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import Header from './components/Header.vue';
import User from './components/User/index.vue';
import useUserStore from './stores/module/user';
const userStore = useUserStore()
const route = useRoute();
const router = useRouter()
const noHeaderAndUser = computed(() => route.meta.noHeaderAndUser);
const noUser = computed(() => route.meta.noUser)
const isMobile = ref(false);

const checkIsMobile = () => {
  isMobile.value = window.innerWidth <= 768;
};

onMounted(() => {
  checkIsMobile();
  window.addEventListener('resize', checkIsMobile);
});

onBeforeUnmount(() => {
  window.removeEventListener('resize', checkIsMobile);
});
</script>

<style lang="scss" scoped>
.app {
  height: 100vh;

  .app-main {
    overflow: hidden;

    &.full-width {
      .app-main-left {
        width: 100%;
        float: none;
      }

      .app-main-right {
        display: none;
      }
    }

    .app-main-left {
      width: 80%;
      float: left;
      overflow: scroll;
      height: calc(100vh - 90px);
      transition: width 0.3s ease;
    }

    .app-main-right {
      width: 20%;
      float: right;
      height: calc(100vh - 90px);
    }
  }

  .user {
    padding-top: 40px;
    font-size: 22px;
    writing-mode: vertical-lr;
    letter-spacing: 10px;
    line-height: 70px;
    color: #333;
  }
}
</style>
